<template>
  <div class="details" v-loading="loadingPage">
    <el-descriptions :column="1" class="descriptions" :title="'基础信息'" border>
      <el-descriptions-item :label-class-name="'label-class'" :label-align="'right'" v-for="(item, index) in list"
        :key="index">
        <template #label>{{ item.label }}：</template>
        <template #default v-if="item.label !== '照片/视频'">{{ item.value || '--' }}</template>
        <template #default v-else>
          <div class="flexLeftCenter media-box">
            <template v-for="(item,index) in mediaList" :key="index">
              <el-image class="meida-img" v-if="item.type===1" :src="item.url_obj"
                :preview-src-list="[item.url_obj]"></el-image>
              <div class="video-placeholder flexCenter" v-else @click.stop="toPreviewVideo(item.url_obj)">
                <el-icon>
                  <VideoPlay />
                </el-icon>
              </div>
            </template>
          </div>
        </template>
      </el-descriptions-item>
    </el-descriptions>
    <el-dialog v-model="dialogVisible" class="video-preview" @close="closePreview">
      <video :src="videoUrl" id="myvideo" controls ref="myvideo"></video>
    </el-dialog>
    <div class="btn-box flexCenter">
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="process" :loading="loading" :disabled="disabled">{{ btnTxt }}</el-button>
    </div>
  </div>
</template>

<script setup name="WorkOrderDetail">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useTabNar } from '@/stores/tabnar';
import { getAfterSaleDetail, processAfterSale } from '@/api/operateManage/AfterSalesWorkOrder'
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter();
const route = useRoute();
const tabNar = useTabNar();
const loading = ref(false);
const loadingPage = ref(true);
const disabled = ref(false)
const btnTxt = ref('处理完成')
const labelList = ref([
  { prop: 'work_no', label: '编号' },
  { prop: 'status_label', label: '状态' },
  { prop: 'client_name', label: '商家名称' },
  { prop: 'type_label', label: '问题类型' },
  { prop: 'sticker_num', label: '设备编号' },
  { prop: 'order_no', label: '订单编号' },
  { prop: 'request_refund_amount', label: '申请退款金额' },
  { prop: 'bank_account', label: '客户银行账户' },
  { prop: 'contact_email', label: '联系邮箱' },
  { prop: 'description', label: '问题描述' },
  { prop: 'meida', label: '照片/视频' },
  { prop: 'create_time', label: '提交时间' },
])
const list = ref([])

const mediaList = ref([])

const dialogVisible = ref(false);
const videoUrl = ref('');

const myvideo = ref(null);

// methods
const back = () => {
  router.go(-1);
  tabNar.deleteTab(route);
}

const ininData = (data) => {
  mediaList.value = data.files_obj
  btnTxt.value = data.status === 200 ? '已处理' : '处理';
  disabled.value = data.status === 200 ? true : false;
  for (let i in labelList.value) {
    let item = {}
    if (labelList.value[i].prop === 'status_label') {
      item = {
        label: labelList.value[i].label,
        value: data[labelList.value[i].prop].cn_name
      }
    } else if (labelList.value[i].prop === 'type_label') {
      item = {
        label: labelList.value[i].label,
        value: data[labelList.value[i].prop].cn_name
      }
    } else {
      item = {
        label: labelList.value[i].label,
        value: data[labelList.value[i].prop]
      }
    }
    list.value.push(item)
  }
}

const process = async () => {
  ElMessageBox.confirm(
    '已确认完成售后事件处理',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }
  )
    .then(async () => {
      loading.value = true;
      const res = await processAfterSale(route.query.id);
      loading.value = false;
      console.log(res);
      if (res.code === 1000) {
        disabled.value = true
        ElMessage.success('处理完成')
        btnTxt.value = '已处理'
        setTimeout(() => {
          router.go(-1)
        }, 1000);
      } else {
        ElMessage.error('处理失败')
      }
    })
    .catch(() => {

    })

}


const toPreviewVideo = (url) => {
  dialogVisible.value = true;
  videoUrl.value = url;
}

const closePreview = () => {
  console.log(myvideo);
  myvideo.value.pause();
  myvideo.value.currentTime = 0;
  dialogVisible.value = false;
  videoUrl.value = '';
  myvideo.value.src = '';
}
// life cycle
onMounted(async () => {
  const res = await getAfterSaleDetail(route.query.id)
  console.log(res);
  loadingPage.value = false;
  if (res.code === 1000) {
    ininData(res.data)
  }
})
</script>

<style lang="less" scoped>
.details {
  margin: 20px;
}

:deep(.el-descriptions__body) {
  background: transparent;
}

:deep(.label-class) {
  width: 120px;
  text-align: right;
  background: transparent !important;
}

:deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
  border: none;
}

.media-box {
  .video-placeholder {
    width: 100px;
    height: 100px;
    background: #f3f3f3;
    margin-right: 10px;
    font-size: 50px;
    cursor: pointer;
  }

  .meida-img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
}

.btn-box {
  margin-top: 40px;
}

#myvideo {
  max-width: 60vw;
  max-height: 60vh;
  margin: 0 auto;
  display: block;
}
</style>